<script setup lang="ts">
import { onMounted, reactive, watch } from 'vue';
import { navigateTo } from '@tarojs/taro';
import { APP_EDITION } from '/@/common/constant';
import IMG_ICON_VOICE from '/@/assets/image/icon/voice.png';
import IMG_ICON_VOICE_BLUE from '/@/assets/image/icon/voice-blue.png';
import { MESSAGE_RECORD_QUERY } from '/@/api/modules/base/message-record';

const props = withDefaults(
  defineProps<{
    /**
     * 主题
     */
    theme?: keyof typeof APP_EDITION;
    /**
     * 是否刷新
     */
    refresh: boolean;
  }>(),
  {
    theme: 'default',
    refresh: false,
  },
);

const emits = defineEmits<{
  (e: 'refresh'): void;
}>();

const state = reactive<{ active: number; messageRecordList: AppMessageRecord.Dto[] }>({
  active: 0,
  messageRecordList: [],
});

function queryList() {
  MESSAGE_RECORD_QUERY({
    comQuery: { page: 1, pageSize: 3 },
  }).then((res) => {
    state.messageRecordList = res.content || [];
    emits('refresh');
  });
}

onMounted(() => {
  queryList();
});

watch(props, (newProps) => {
  if (newProps.refresh) {
    queryList();
  }
});
</script>

<template>
  <swiper
    :indicator-dots="false"
    :current="state.active"
    :autoplay="true"
    :vertical="true"
    v-if="state.messageRecordList && state.messageRecordList.length"
    :class="`home-message-record ${props.theme}`"
  >
    <swiper-item
      v-for="item in state.messageRecordList"
      :key="item.id"
      class="home-message-record__swiper-item"
      @click="
        navigateTo({
          url: '/pages/msg/list/index',
        })
      "
    >
      <image
        class="home-message-record__swiper-item__icon"
        :src="{ default: IMG_ICON_VOICE, hgy: IMG_ICON_VOICE_BLUE }[props.theme]"
      />
      <view class="home-message-record__swiper-item__content">{{ item.title }}</view>
    </swiper-item>
  </swiper>
</template>

<style lang="scss">
.home-message-record {
  border-radius: 20px;
  margin-bottom: 20px;
  background-color: #f8f9fd;
  height: 1.75rem;

  &__swiper-item {
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 28px;

    &__icon {
      width: 36px;
      height: 36px;
      margin-right: 20px;
    }
  }

  &.hgy {
    background-color: #fff;
    overflow: hidden;
    border-radius: 20px;
  }
}
</style>
